<%@ page language="java" contentType="text/html;charset=UTF-8"
    pageEncoding="UTF-8"%>
 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta http-equiv="Page-Enter" content="blendTrans(Duration=1.0)"/>
    <meta name="page-view-size" content="1280*720"/>
    <title>ITV行业定制集成演示平台</title>
    <style type="text/css">
		body {margin:0; padding:0; width:1280px; height:720px; background-color:transparent;}
		input{
		    outline-color: invert ;
			outline-style: none ;
			outline-width: 0px ;
			border: none ;
			border-style: none ;
			text-shadow: none ;
			-webkit-appearance: none ;
			-webkit-user-select: text ;
			outline-color: transparent ;
			box-shadow: none;
		}
		a{
			outline-style: none ;
		}
	</style>

<%
String picUrl=request.getParameter("f_cp_url");
String catalogId=request.getParameter("f_catalog_id");
if(picUrl==null){
	picUrl="";
}
if(catalogId==null){
	catalogId="0";
}

String pageNo=request.getParameter("pageNo");
String focusId_=request.getParameter("focusId");

%>
<%@include file="commons_category.jsp" %>
<script type="text/javascript" src="js/content_<%=catalogId%>.js"></script>
</head>
<body>

 	<div id="bg" style="position:absolute; left:0px;top:0px;" ><img width="1280" height="720" src="images/bg_platform_view.png"/></div> 
	
	<div style="position:absolute; left:0px;top:0px;" ><img width="274" height="86" src="<%=picUrl%>"/></div> 
	
	<img style="position:absolute;left:820px; top:30px;width:270px;height:75px;" src="images/search.png">
	<img id="searchPlatform" style="position:absolute;left:820px; top:30px;width:272px;height:77px;z-index:8;display:none;" src="images/search_focus.png">
	<input id="modelName" type="text" value="请输入首字母" style="position:absolute;left:900px; top:54px;width:146px;height:25px;z-index:9;line-height:25px;font-size:18px;background-color:transparent; color:#ffffff; text-align:center;" onFocus="javascript:searchBtnFocus('searchPlatform');" onBlur="javascript:searchUnBtnFocus('searchPlatform');" oninput="javascript:searchModel();"/>
	
	<img style="position:absolute;left:1087px; top:35px;width:143px;height:72px;" src="images/go_back.png">
	<a id="goBack" style="position:absolute;left:1083px; top:36px;width:151px;height:70px;z-index:9;" onFocus="javascript:btnFocus(this.id,'images/go_back_focus.png');" onBlur="javascript:unbtnFocus(this.id,'images/dot.gif');" href="javascript:goBack();"><img width="151" height="70" src="images/dot.gif"/></a>
	
	<div id="list">
	   	
	</div>
	
	<div style="position:absolute;left:124px; top:590px;width:750px; height:85px; line-height:85px; font-size:40px; text-align:center; color:#ffffff; " >
    	为了更好的浏览效果，请横屏使用
   	</div>
	
	<img style="position:absolute;left:863px; top:602px;width:157px;height:75px;" src="images/pre_page.png">
	<a id="prepage" style="position:absolute;left:857px; top:602px;width:168px;height:75px;z-index:9;" onFocus="javascript:btnFocus(this.id,'images/pre_page_focus.png');" onBlur="javascript:unbtnFocus(this.id,'images/dot.gif');" href="javascript:prepage();"><img width="168" height="75" src="images/dot.gif"/></a>
	
	<div id="playPage" style="position:absolute; left:1025px; top:629px;width:40px; height:26px; line-height:26px; font-size:26px; text-align:center; color:#f66b0e; " >
    	1/1
   	</div>
   	
   	<img style="position:absolute;left:1071px; top:602px;width:157px;height:75px" src="images/next_page.png">
   	<a id="nextpage" style="position:absolute;left:1065px; top:602px;width:168px;height:75px;z-index:9;" onFocus="javascript:btnFocus(this.id,'images/next_page_focus.png');" onBlur="javascript:unbtnFocus(this.id,'images/dot.gif');" href="javascript:nextpage();"><img width="168" height="75" src="images/dot.gif"/></a>
	
	<div style="position:absolute; left:79px; top:679px; width:1135px; height:24px; line-height:24px; font-size:24px; color:#ffffff; text-align:center; ">
		<marquee id="scroll_text" behavior="scroll" direction="left" scrollamount="5"></marquee>
	</div>
</body>
<script type="text/javascript" src="js/message.js"></script>

<script type="text/javascript">
	var relativePathPrefix="../../../../";
	var filepath = '<%=CategoryUtils.FILE_PATH%>';
	var contentCount=0;	//查询到的数据总条数
	var ipageCount = 0; //总页码
	var ipageSize = 8; //单页面信息条数 
	var infos = "";
	var pageIndex=0;
	var focusFlag=true;
	
	window.onload=function(){
		//滚动条
		getMessageData();
		//读取节目数量
		getContentList();
		
	};
	function getMessageData(){
		var json = data_4822;
		if(json&&json[0]){
			if(json[0].f_cc_desc){
				document.getElementById("scroll_text").innerHTML=(json[0].f_cc_desc?json[0].f_cc_desc.replace(/<[^>]+>/g,""):"").replace(/(_ueditor_page_break_tag_)/g,"");	
			}else{
				document.getElementById("scroll_text").innerHTML="ITV行业定制集成演示平台欢迎您！";
			}
		}else{
			document.getElementById("scroll_text").innerHTML="ITV行业定制集成演示平台欢迎您！";
		}
	}
	function getContentList(){
		var json = data_<%=catalogId%>;
		if(json){
			contentCount = json.length;
	  		ipageCount = Math.ceil(contentCount / ipageSize);
			infos= json;
	  		initPage(pageIndex);
		}else{
			document.getElementById("goBack").focus();
		}
	}
	function getSearchContentList(paramJson){
		var json = paramJson;
		if(json){
			contentCount = json.length;
	  		ipageCount = Math.ceil(contentCount / ipageSize);
			infos= json;
			pageIndex=0;
	  		initPage(pageIndex);
		}else{
			document.getElementById("goBack").focus();
		}
		
	}
	
	//初始化节目列表
    function initPage(pageIndex) {
		
		document.getElementById("playPage").innerHTML="";
		if(infos.length>0){
			document.getElementById("playPage").innerHTML=(pageIndex+1)+"/"+ipageCount;
		}
		
		var listcontent='';
		var obj = document.getElementById("list");
		obj.innerHTML="";
		
		var left1=0;
		var left2=0;
		var left3=0;
		var left4=0;
		for (i = 0; i < ipageSize; i++) {
	        if (pageIndex * ipageSize + i < infos.length) {
	        	left1 = 16+(i%4*300);
	        	left2 = 44+(i%4*300);
	        	left3 = 55+(i%4*300);
	        	left4 = 68+(i%4*300);
	        	
	    		var imgURL=filepath+infos[pageIndex * ipageSize + i].f_cc_picurl.replace("PIC/imgs/","");
	    		
	    		if(i<4){
	    			listcontent+="<img style='position:absolute;left:"+left2+"px;top:130px;width:316px;height:193px;' src='images/shadow.png'/>";
 	    			listcontent+="<img style='position:absolute;left:"+left3+"px;top:139px;width:282px;height:159px;z-index:7;' src='"+imgURL+"'/>";
 	    			listcontent+="<img id='img_platform_jump_"+i+"' style='position:absolute;left:"+left2+"px;top:133px;width:305px;height:172px;z-index:8;display:none;' src='"+imgURL+"'/>";
 	    			listcontent+="<img id='a_platform_jump_"+i+"' style='position:absolute;left:"+left1+"px;top:105px;width:361px;height:228px;z-index:9;display:none;' src='images/btn_platform_focus.png'/>";
 	    			listcontent+="<a id='platform_jump_"+i+"' style='position:absolute;left:"+left3+"px;top:139px;width:282px;height:159px;z-index:9;' onFocus=\"javascript:platformJumpBtnFocus(this.id,'images/btn_platform_focus.png');\" onBlur=\"javascript:platformJumpUnBtnFocus(this.id,'images/dot.gif');\" href='dispatcher.jsp?imgURL="+imgURL+"'><img width='282' height='159' src='images/dot.gif'/></a>";
	    			listcontent+="<div style='position:absolute; left:"+left4+"px; top:319px; width:257px; height:27px; line-height:27px; font-size:25px; color:#ffffff; text-align:center; '>"+infos[pageIndex * ipageSize + i].f_cc_name+"</div>";
	    		}else{
	    			listcontent+="<img style='position:absolute;left:"+left2+"px;top:366px;width:316px;height:193px;' src='images/shadow.png'/>";
 	    			listcontent+="<img style='position:absolute;left:"+left3+"px;top:375px;width:282px;height:159px;z-index:7;' src='"+imgURL+"'/>";
 	    			listcontent+="<img id='img_platform_jump_"+i+"' style='position:absolute;left:"+left2+"px;top:368px;width:305px;height:172px;z-index:8;display:none;' src='"+imgURL+"'/>";
 	    			listcontent+="<img id='a_platform_jump_"+i+"' style='position:absolute;left:"+left1+"px;top:340px;width:361px;height:228px;z-index:9;display:none;' src='images/btn_platform_focus.png'/>";
					listcontent+="<a id='platform_jump_"+i+"' style='position:absolute;left:"+left3+"px;top:375px;width:282px;height:159px;z-index:9;' onFocus=\"javascript:platformJumpBtnFocus(this.id,'images/btn_platform_focus.png');\" onBlur=\"javascript:platformJumpUnBtnFocus(this.id,'images/dot.gif');\" href='dispatcher.jsp?imgURL="+imgURL+"'><img width='282' height='159' src='images/dot.gif'/></a>";
	    			listcontent+="<div style='position:absolute; left:"+left4+"px; top:555px; width:257px; height:27px; line-height:27px; font-size:25px; color:#ffffff; text-align:center; '>"+infos[pageIndex * ipageSize + i].f_cc_name+"</div>";
	    		}
	    		
	       }
	    }
		obj.innerHTML=listcontent;
		
		if(focusFlag){
			if(document.getElementById("platform_jump_0")){
				document.getElementById("platform_jump_0").focus();
			}else{
				document.getElementById("goBack").focus();
			}
			focusFlag=false;
		}
		
    }
	
	
	 
	//前一页
	function prepage() {
		//判断总数是否大于单页显示条数
	    if (contentCount > ipageSize) {
	    	//如果总数大于单页显示的条数，说明有多页
	        if (pageIndex > 0) {
	        	pageIndex--;
	            initPage(pageIndex);
	        }else{
	        	pageIndex = ipageCount - 1;
	        	initPage(pageIndex);
	        }
	        
	    }
	}
	
	//下一页
	function nextpage() {
		//判断总数是否大于单页显示条数
	    if (contentCount > ipageSize) {
	    	//如果总数大于单页显示的条数，说明有多页
	        if (pageIndex < ipageCount - 1) {
	        	pageIndex++;
	            initPage(pageIndex); 
	        }else{
	        	pageIndex = 0;
	        	initPage(pageIndex);
	        }
	        
	    }
	}
	
	 
	function btnFocus(id, pic){
		document.getElementById(id).childNodes[0].src=pic;
	}
	function unbtnFocus(id,pic){
		document.getElementById(id).childNodes[0].src=pic;
	}
	function platformJumpBtnFocus(id,pic){
		document.getElementById("img_"+id).style.display="";
		document.getElementById("a_"+id).style.display="";
	}
	function platformJumpUnBtnFocus(id,pic){
		document.getElementById("img_"+id).style.display="none";
		document.getElementById("a_"+id).style.display="none";
	}
	
	function searchBtnFocus(id){
		if(document.getElementById("modelName").value=='请输入首字母'){
			document.getElementById("modelName").value='';
		}
		document.getElementById(id).style.display="";
	}
	function searchUnBtnFocus(id){
		if(document.getElementById("modelName").value==''){
			document.getElementById("modelName").value='请输入首字母';
		}
		document.getElementById(id).style.display="none";
	}
	
	function searchModel(){
		
		if(document.getElementById("modelName").value==''){
			//读取节目数量
			getContentList();
		}else{
			var paramJson=[];
			var json = data_<%=catalogId%>;
			for (i = 0; i < json.length; i++) {
				if(json[i].f_cc_searchname.indexOf(document.getElementById("modelName").value)!=-1){
					paramJson.push(json[i]);
				}
			}
			//读取搜索到的节目数量
			getSearchContentList(paramJson);
		}
		
	}
	
	function goBack(){
		setTimeout(function(){
			window.location.href="index.jsp?pageNo=<%=pageNo%>&focusId=<%=focusId_%>";
		},1000);
	}
	
</script>
</html>